<template>
  <div>
    <template v-for="(item, idx) in origin.fields">
      <os-input v-if="!item.type" :key="idx" :item="item" v-model="form_info[map[idx]]"></os-input>
      <os-switch v-if="item.type=='switch'" :key="idx" :item="item" v-model="form_info[map[idx]]"></os-switch>
    </template>
    <div class="value alone-right" style="margin-top: 30px;">
      <div :class="['btn', 'btn-blue', {'mb10': $store.state.user.isMobile}]" @click="save">{{$t('btn.save')}}</div>
      <div :class="['btn', 'btn-blue', {'mb10': $store.state.user.isMobile}]" @click="site_investigate">{{$t('btn.startScan')}}</div>
    </div>
    <os-table :info="origin.info1">
      <tr v-for="(item, idx) in info_data" :key='idx' slot="table_list">
        <td v-for="(el, key) in info_map" :key='key'>
          {{item[el]}}
        </td>
        <td :key="3">
          <span :class="'signal' + item.signal"></span>
        </td>
        <td :key="4">
          <span class="add" @click="connect(item)">{{$t("btn.selected")}}</span>
        </td>
      </tr>
    </os-table>
    <os-table :info="origin.info2">
      <tr v-for="(item, idx) in [status]" :key='idx' slot="table_list">
        <td v-for="(el, key) in map_status" :key='key'>
          {{item[el] ? item[el] : "--"}}
        </td>

      </tr>
    </os-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      origin: this.$t('wifi.scan'),
      info_data: '',
      info_map: ['ssid', 'bssid', 'enc'],
      form_info: {
        enabled: "1",
        ssid: "",
        bssid: "",
        encryption: "",
        key: "",
      },
      map: ['enabled', 'ssid', 'bssid', 'encryption', 'key'],
      status: '',
      map_status: ['ssid', 'bssid', 'apclient_ip', 'apclient_rx', 'apclient_tx', 'apclient_uptime']
    }
  },
  methods: {
    save() {
      let params = this.deepClone(this.form_info)
      if(this.form_info.enabled == "1") {
        for(let key in this.form_info) {
          // undefined 未填写
          if(key!="enabled" && key!="key" && this.form_info[key]===undefined) {
            return
          }
        }
        console.log(params)
        if(params.encryption.startsWith("WPA PSK")) {
          params.encryption = "psk"
        } else if (params.encryption.toLowerCase() == "none") {
          
        } else {
          params.encryption = "psk-mixed"
        }
        if(params.encryption.toLowerCase() != "none" && params.key.length < 8) {
          this.$confirm(this.$t('notification.pwdLengthNotice'), {
              type: "error",
          })
          return
        }
      }
      this.proxy_req("post", "/webapi?op=set_wifi_apclient", params, res=> {
        this.info_data = []
        console.log(res)
      }, true)
    },
    get_config() {
      this.$req("/webapi?op=get_wifi_apclient_config").then(res=> {
        console.log("config", res)
        Object.assign(this.form_info, {
          enabled: res.enabled,
          ssid: res.ssid,
          bssid: res.bssid,
          encryption: res.encryption,
          key: res.key,
        })
      })
    },
    getStatus() {
      this.$req.get("/webapi?op=get_wifi_apclient_status").then(res=> {
        // console.log(res)
        Object.assign(res, {
          apclient_uptime: this.formatDuration(res.apclient_uptime),
          apclient_rx: this.formatByte(res.apclient_rx),
          apclient_tx: this.formatByte(res.apclient_tx),
        })
        this.status = res

      })
    },
    connect(item) {
      console.log(item)
      Object.assign(this.form_info, {
        ssid: item.ssid,
        bssid: item.bssid,
        encryption: item.enc,
        key: "",
      })
      // this.proxy_req("get", "", params, ()=> {}, true)
    },
    site_investigate(){
      const loading = this.createLoading()
      this.$req.get('/webapi?op=site_survey', {
        params: {
          wifimode: "2"
        }
      }).then(res=> {
        console.log(res)
        loading.close()
        let arr;
        if(res.split){
          arr = res.split('\n')
        } else {
          // res 为json对象
          res.data.forEach((el, hash)=> {
            let signal = parseInt(el.signal) // 负数值越大信号越强
            if(signal > -25){
              el.signal = 4
            } else if(signal > -50){
              el.signal = 3
            } else if(signal > -75){
              el.signal = 2
            } else if(signal >= -100 ){
              el.signal = 1
            }
          })
          this.info_data = res.data
          return
        }
        // console.log(arr, JSON.parse(arr.slice(arr.length-1)))
        let target_data = JSON.parse(arr.slice(arr.length-1)).data
        for(var i =1, j=0; i < arr.length; i+=2){
          // target_data[j].bssid = arr[i].split(' ')[1]
          // console.log(Object.prototype.toString(target_data[j]))
          // Object.defineProperty(target_data[j], 'bssid', {
          //   value: arr[i].split(' ')[1],
          //   enumerable: true,
          //   writable: true,
          //   configurable: false,
          //   // getter setter
          // })
          if(arr[i].split(' ')[1] == ""){
            continue
          }
          target_data[j] = {...target_data[j], bssid: arr[i].split(' ')[1],}
          j++
        }
        console.log(target_data)
        target_data.forEach((el, hash)=> {
          let signal = parseInt(el.signal) // 负数值越大信号越强
          if(signal > -25){
            el.signal = 4
          } else if(signal > -50){
            el.signal = 3
          } else if(signal > -75){
            el.signal = 2
          } else if(signal >= -100 ){
            el.signal = 1
          }
        })
        this.info_data = target_data
        console.log(target_data)
      })
    },
  },
  created() {
    this.$bus.emit("changeTab", 4)
    this.get_config()
    this.getStatus()
    this.timer = setInterval(this.getStatus, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
</style>
